বেসিক ইফেক্টস: show(), hide(), toggle()

jQuery-এর বেসিক ইফেক্টস হল show(), hide(), এবং toggle() ফাংশন, যা HTML এলিমেন্টগুলিকে দৃশ্যমান করার এবং লুকানোর জন্য ব্যবহার করা হয়। এই ফাংশনগুলি ওয়েব পেজের ইউজার ইন্টারফেসে ডাইনামিক চেঞ্জ প্রদান করে, যাতে ব্যবহারকারীর ইন্টার‌্যাকশন আরও সমৃদ্ধ হয়।

show() ফাংশন

show() ফাংশন কোনো এলিমেন্টকে দৃশ্যমান করে, যা আগে লুকানো ছিল।

সিনট্যাক্স:

$(selector).show(speed, callback);

• selector: যে এলিমেন্টটি দেখানো হবে।
• speed (ঐচ্ছিক): এলিমেন্ট দেখানোর গতি নির্দেশ করে, যেমন "slow", "fast", বা মিলিসেকেন্ডে।
• callback (ঐচ্ছিক): এলিমেন্ট দেখানো সম্পূর্ণ হয়ে গেলে কল হওয়া ফাংশন।

উদাহরণ:

<button>দেখাও</button>
<p style="display: none">এই টেক্সট দেখানো হবে।</p>

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").show("slow");
  });
});
</script>

hide() ফাংশন

hide() ফাংশন কোনো এলিমেন্টকে লুকিয়ে ফেলে।

সিনট্যাক্স:

$(selector).hide(speed, callback);

• speed (ঐচ্ছিক): এলিমেন্ট লুকানোর গতি নির্দেশ করে।
• callback (ঐচ্ছিক): এলিমেন্ট লুকানো সম্পূর্ণ হয়ে গেলে কল হওয়া ফাংশন।

উদাহরণ:

<button>লুকাও</button>
<p>এই টেক্সট লুকানো হবে।</p>

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000);
  });
});
</script>

toggle() ফাংশন

toggle() ফাংশন এলিমেন্টের দৃশ্যমানতা পরিবর্তন করে। যদি এলিমেন্ট দৃশ্যমান হয়, তবে এটি লুকিয়ে যাবে; যদি লুকানো থাকে, তবে দেখা যাবে।

সিনট্যাক্স:

$(selector).toggle(speed, callback);

• speed (ঐচ্ছিক): দৃশ্যমানতা পরিবর্তনের গতি নির্দেশ করে।
• callback (ঐচ্ছিক): দৃশ্যমানতা পরিবর্তন সম্পূর্ণ হয়ে গেলে কল হওয়া ফাংশন।

উদাহরণ:

<button>টগল করো</button>
<p>এই টেক্সট টগল হবে।</p>

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle("fast");
  });
});
</script>

সারাংশ

jQuery-র show(), hide(), এবং toggle() ফাংশনগুলি ওয়েব পেজের ডাইনামিক ইন্টার‌্যাকশনের জন্য খুব কার্যকর। এগুলি ব্যবহার করে ইউজারের ইন্টারফেসের উপাদানগুলির দৃশ্যমানতা সহজেই নিয়ন্ত্রণ করা যায়, যা ওয়েব অ্যাপ্লিকেশনকে আরও ইন্টার‌্যাক্টিভ এবং ব্যবহারকারী-বান্ধব করে তোলে।